<template>
  <div class="overflow-scroll style11">
    <div class="head">
      <div class="item" v-for="item in moneyTypeList" :key="item.id">
        <div class="title" :style="{ backgroundColor: item.color }">
          {{ item.title }}
        </div>
        <div class="money">
          <count-to  :start-value="0" :end-value="item.money" :decimals="2" class="text-30px  dark:text-dark" />
        </div>
      </div>
    </div>
    <n-card title="" :bordered="false" class="h-full rounded-8px shadow-sm">
      <div class="flex-col h-full">
        <n-space class="pb-12px" justify="space-between">
          <n-space>
            <n-input v-model:value="keywords" type="text" placeholder="请输入用户名" clearable />
            <n-button type="primary" @click="handleAddTable">
              查询
            </n-button>
            <!-- <div style="color: red;line-height: 35px;">总收益: {{ income }}&nbsp;&nbsp;&nbsp;总浏览量: {{ views }}</div> -->
          </n-space>
          <n-space align="center" :size="18">
            <n-button size="small" type="primary" @click="getTableData()">
              <icon-mdi-refresh class="mr-4px text-16px" :class="{ 'animate-spin': loading }" />
              刷新表格
            </n-button>
            <column-setting v-model:columns="columns" />
          </n-space>
        </n-space>
        <n-data-table remote :columns="columns" :data="tableData" :loading="loading" :pagination="pagination" flex-height
          class="flex-1-hidden" />
      </div>
    </n-card>
  </div>
</template>

<script setup lang="tsx">
import { reactive, ref } from 'vue';
import type { Ref } from 'vue';
import { NButton, NPopconfirm, NSpace, NTag } from 'naive-ui';
import type { DataTableColumns, PaginationProps } from 'naive-ui';
import { selectOperatorList, selectAllOperators } from '@/service';
import { useBoolean, useLoading } from '@/hooks';
import ColumnSetting from './components/column-setting.vue';
import { useRouter } from "vue-router"

const { loading, startLoading, endLoading } = useLoading(false);
const { bool: visible, setTrue: openModal } = useBoolean();
const router = useRouter()

const columns: Ref<DataTableColumns<any>> = ref([
  {
    key: 'id',
    title: 'ID',
    align: 'center'
  },
  {
    key: 'role_name',
    title: '角色名称',
    align: 'center'
  },
  {
    key: 'username',
    title: '用户名称',
    align: 'center'
  },
  {
    key: '',
    title: '充值人数',
    align: 'center'
  },
  {
    key: 'total_income',
    title: '收益',
    align: 'center'
  },
  {
    key: 'actions',
    title: '操作',
    align: 'center',
    render: (row: any) => {
      return (
        <NSpace justify={'center'}>
          <NButton size={'small'} onClick={() => handleEditTable(row)}>
            数据详情
          </NButton>
        </NSpace>
      );
    }
  }
]) as Ref<any>;

// 查询关键字
let keywords: any = ref(null)
// 查询
function handleAddTable() {
  pagination.page = 1
  getTableData()
}
// 详情
function handleEditTable(row: any) {
  // console.log(row);
  router.push({
    path: '/user-detail/details',
    query: {
      operator_id: row.id
    }
  })
}


const tableData = ref<any>([]);
async function getTableData() {
  startLoading();
  let params = {
    page: pagination.page,
    page_size: pagination.pageSize,
    keywords: keywords.value,
    operator_role_id: 100 //角色：100全部，2分销商，3联运商
  }
  const { data } = await selectOperatorList(params);
  // console.log(data);
  if (data) {
    tableData.value = data.item;
    pagination.itemCount = data.total;
    endLoading();
  }
}

// 分页
const pagination: PaginationProps = reactive({
  page: 1,
  pageSize: 10,
  showSizePicker: true,
  pageSizes: [10, 15, 20, 25, 30],
  onChange: (page: number) => {
    pagination.page = page;
    getTableData();
  },
  onUpdatePageSize: (pageSize: number) => {
    pagination.pageSize = pageSize;
    pagination.page = 1;
    getTableData();
  }
});

let moneyTypeList = ref([
  {
    id: 'tixian',
    color: '#2f4056',
    title: '总用户数',
    money: 0.0,
  },
  {
    id: 'account',
    color: '#149bff',
    title: '总分销人数',
    money: 0.0,
  },
  {
    id: 'totalIncome',
    color: '#98ac31',
    title: '总联运人数',
    money: 0.0,
  },
  {
    id: 'a',
    color: '#a98831',
    title: '总收益',
    money: 0.0,
  },
  {
    id: 'before',
    color: '#d98831',
    title: '总充值人数',
    money: 0.0,
  },
])
async function getSelectAllOperators() {
  let { data } = await selectAllOperators()
  // console.log(data);
  moneyTypeList.value = [
    {
      id: 'tixian',
      color: '#2f4056',
      title: '总用户数',
      money: data.total_users,
    },
    {
      id: 'account',
      color: '#149bff',
      title: '总分销人数',
      money: data.distribution_users,
    },
    {
      id: 'totalIncome',
      color: '#98ac31',
      title: '总联运人数',
      money: data.intermodal_users,
    },
    {
      id: 'a',
      color: '#a98831',
      title: '总收益',
      money: data.total_income,
    },
    {
      id: 'before',
      color: '#d98831',
      title: '总充值人数',
      money: 0.0,
    },
  ]

}
function init() {
  getTableData();
  getSelectAllOperators();
}

// 初始化
init();
</script>

<style scoped>
.style11::-webkit-scrollbar {
  display: none
}

.head {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.item {
  min-width: 200px;
  margin-right: 30px;
  transition: all .3s;
}

.item:hover {
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.3));
  transform: scale(1.05);
}

.title {
  padding: 10px 0;
  text-align: center;
  color: #FFF;
  font-size: 16px;
  font-weight: 600;
}

.money {
  border: 1px solid #ccc;
  border-top: none;
  padding: 20px 0;
  text-align: center;
  background-color: #FFF;
  font-weight: bold;
  color: #333;
}
</style>
